<template>
  <div class="maze-game">
    <div class="game-info">
      <h2>迷宫猫咪追逐游戏</h2>
      <div class="info-panel">
        <p>迷宫大小: {{ rows }} × {{ columns }}</p>
        <p>墙壁占比: {{ mazeInfo.wallPercentage }}%</p>
        <p>路径格子: {{ mazeInfo.pathCells }}</p>
        <p>墙壁格子: {{ mazeInfo.wallCells }}</p>
        <p>猫咪数量: {{ cats.length }}</p>
      </div>
     
      <div class="controls">
        <el-button @click="startGame" type="primary">开始游戏</el-button>
        <el-button @click="changeSize(11, 11)">小迷宫 (11×11)</el-button>
        <el-button @click="changeSize(15, 15)">中迷宫 (15×15)</el-button>
        <el-button @click="changeSize(21, 21)">大迷宫 (21×21)</el-button>
      </div>
    </div>
    <MazeBoard :maze="maze" :cellSize="50" :cats="cats" :effects="effects" />
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import MazeBoard from '@/components/game/MazeBoard.vue';
import useMaze from '@/composables/domain/game/useMaze';
import { useCats } from '@/composables/domain/game/useCats';
import { useEffects } from '@/composables/domain/game/useEffects';
import { ElMessageBox, ElMessage } from 'element-plus'

const { 
  maze, 
  rows, 
  columns, 
  mazeInfo, 
  initMaze,
  regenerateMaze, 
  changeMazeSize,
  generateRandomValidPosition,
  generateMultipleValidPositions
} = useMaze

const { 
  cats, 
  catCount, 
  initCats, 
  moveCat,
  setCatMoveDirection,
  validateCatPosition,
  repositionCat,
  getValidMoveDirections,
  updateCatExactPosition,
  getCatVisualPosition,
  isCatsMeet
} = useCats()

const { 
  effects, 
  effectCount, 
  initEffects,
  catEatEffect
} = useEffects()

const changeSize = (newRows, newCols) => {
  changeMazeSize(newRows, newCols)
  // 重新生成迷宫后，重新初始化猫咪
  initCats()
  // 再初始化特效
  initEffects()
}

// 初始化猫咪
const initCatsHandler = () => {
  initCats()
}

// 重新生成迷宫时也重新初始化猫咪
const regenerateMazeHandler = () => {
  regenerateMaze()
  initCatsHandler()
}

// 初始化
onMounted(() => {
  // 先初始化迷宫
  initMaze()
  // 再初始化猫咪
  initCats()
  // 再初始化特效
  initEffects()
})

// 游戏运行计时器
let gameInterval = null
let animationFrameId = null
let isGameRunning = false

// 运行游戏
const runGame = () => {
  console.log('运行游戏')
  isGameRunning = true
  
  const gameLoop = () => {
    // 如果游戏已结束，停止循环
    if (!isGameRunning) {
      return
    }
    
    // 更新每个猫咪的精确位置（连续移动）
    cats.value.forEach(cat => {
      updateCatExactPosition(cat)
      
      // 检查猫咪是否吃到了特效，猫咪的速度增加
      const isEatEffect = catEatEffect(cat)
      if (isEatEffect) {
        cat.speed += 0.01 // 增加速度
      }
      
      // 判断是否有两只猫咪相遇，相遇结束游戏
      if (isCatsMeet()) {
        console.log('猫咪相遇，游戏结束')
        // 结束游戏
        endGame()
        return
      }
    })
    
    // 继续游戏循环
    animationFrameId = requestAnimationFrame(gameLoop)
  }
  
  // 启动游戏循环
  gameLoop()
}

// 结束游戏
const endGame = () => {
  console.log('游戏结束')
  isGameRunning = false
  
  // 停止游戏
  if (animationFrameId) {
    cancelAnimationFrame(animationFrameId)
    animationFrameId = null
  }
  
  // 停止所有猫咪的移动
  cats.value.forEach(cat => {
    cat.isMoving = false
  })
  
  // 弹窗提示
  ElMessage.success('游戏结束')
}

// 开始游戏
const startGame = () => {
  console.log('开始游戏')
  
  // 如果游戏正在运行，先停止
  if (isGameRunning) {
    endGame()
  }
  
  // 重新初始化猫咪（重置位置和状态）
  initCats()
  
  // 开始新游戏
  runGame()
}
</script>

<style scoped>
.maze-game {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.game-info {
  text-align: center;
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  min-width: 400px;
}

.game-info h2 {
  color: #333;
  margin-bottom: 16px;
}

.info-panel {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 16px;
}

.info-panel p {
  margin: 0;
  padding: 8px 12px;
  background: #f5f5f5;
  border-radius: 4px;
  font-size: 14px;
  color: #666;
}

.maze-features {
  margin-bottom: 20px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 6px;
  border-left: 4px solid #67C23A;
}

.feature-text {
  margin: 4px 0;
  font-size: 13px;
  color: #555;
}

.controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
</style> 